<template>
<!--    收藏-->
    <div style="margin-top: 100px">
        <div class="section" >
            <el-row>
                <el-col :span="8" v-for="(item,index) in collectList"  :key="index" :offset="index > 0 ? 2 : 0">
                    <el-card :body-style="{ padding: '0px'} " class="card">

                        <img :src="item[0].logo" class="image">
                        <div style="padding: 14px;">
                            <div class="bottom clearfix">
                                <P>{{item[0].name}}</P>
                                <time class="time">{{ item[0].addtime}}</time>
                                <el-button type="text" class="button" :class="deletecol">
                                    删除
                                </el-button>

                                <el-button type="text" class="button">
                                    <a :href="item[0].url">播放</a>
                                </el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {getCollectionOfUserId, findVideoid, delCollect, delHistory} from "../api";
    import {mapState} from "vuex"
    import {mapGetters} from "vuex"


    export default {
        name: "my-video",
        data() {
            return {
                currentDate: new Date(),
                collection:[], //收藏视频
                collectList:[] //详情
            };
        },
        computed:{
            ...mapState("user",{
                userId: state=>state.userId
            }),
            ...mapGetters([
                'loginIn',

            ])
        },
        created() {
            this.getCollect(this.userId)
        },
       // mounted() {
       //   this.getCollect(this.userId)
       // },
        methods:{
            getCollect(userId){
                getCollectionOfUserId(userId)
                .then(res=>{
                    this.collection=res.data.collects;
                    for (let i in this.collection){
                        this.getVideoOfIds(this.collection[i].videoid)
                        this.deletecol(this.collection[i].collectid)
                    }

                })
            },
            getVideoOfIds(videoid){
                findVideoid(videoid)
                .then((res)=>{
                    this.collectList.push(res.data.findvideo)

                    //this.collectList=res.data.findvideo;

                })
                .catch(err=>{
                    console.log(err)
                })

            },
            deletecol(colid){
                delCollect(colid)
                    .then((res)=>{
                    })
            }

        }


    }
</script>

<style scoped>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>